<template>
	<view class="main">
		<!-- top -->
		<view class="top">
			<div class="top1">
				<view class="top1l">
					<a href="/#门类"></a>
					<a href="/#墙类"></a>
					<a href="/#柜类" class="active"></a>
					<a href="/#收纳"></a>
					<a href="/#楼梯"></a>
					<a href="/#装饰"></a>
					<a href="/#吊顶"></a>
					<a href="/#卫浴"></a>
					<a href=""></a>
					<a href="/#家具"></a>
					<a href="/#软装"></a>
					<a href="/#智能"></a>
					<a href="/#商城"></a>
				</view>
				<view class="top1r"></view>
			</div>

			<div class="top2">
				<view class="top2l">
					<a href="功能柜类" class="active"></a>
					<a href="储物柜类"></a>
					<a href="装饰柜类"></a>
					<a href="书柜" class="active"></a>
					<a href="酒柜"></a>
					<a href="橱柜"></a>
					<a href="岛台"></a>
					<a href="餐边柜"></a>
					<a href="电视柜"></a>
				</view>
				<view class="top2r" @click="_tana()"></view>
				<view class="logo"></view>

				<!-- 弹出层A -->
				<view class="tana" v-if="tana">
					<view class="tana_t">
						<a href="javascript:;" :class="index===tana_t_active?'active':''" :style="{ 'background-image': 'url(' + tana_t_img + ')' }"  @click="_tana_t(index)" v-for="(item,index) in tana_box" :key="index"> </a>
					</view>

					<view class="tana_f">
						<a href="javascript:;" :style="{ 'background-image': 'url(' + item.src + ')' }"  @click="_tana_f(item.id)" v-for="(item,index) in tana_f_img" :key="index"> </a>
					</view>
				</view>
				<!-- 弹出层A end-->


			</div>

			<div class="top3">
				<div class="top3t">
					<a href="B11" class="active">
						<i></i>
					</a>
					<a href="B12赋值"><i></i></a>
					<a href="B13赋值"><i></i></a>
					<a href="B14赋值"><i></i></a>
					<a href="B15赋值"><i></i></a>
					<a href="B16赋值"><i></i></a>
					<a href="赋值"><i></i></a>
					<a href="赋值"><i></i></a>
					<a href="赋值"><i></i></a>
					<a href="赋值"><i></i></a>
				</div>
				<div class="top3f">
					<a href="javascript:;" :class="index===top3f_active?'active':''" :style="{ 'background-image': 'url(' + top3f_img + ')' }"  @click="_top3f(index,tan_f[index].width,tan_f[index].height,tan_f[index].x,tan_f[index].y)" v-for="(item,index) in top3f" :key="index"></a>
				</div>

				<!-- 弹出层 -->
				<view class="tan" v-if="tan">
					<view class="tan_t">
						<a href="javascript:;" :class="index===tan_t_active?'active':''" :style="{ 'background-image': 'url(' + tan_t_img + ')' }"  @click="_tan_t(index)" v-for="(item,index) in tan_t" :key="index"> </a>
					</view>

					<view class="tan_f">
						<a href="javascript:;" :style="{ 'background-image': 'url(' + item.src + ')' }"  @click="_tan_f(index)" v-for="(item,index) in tan_f_img" :key="index"> </a>
					</view>
				</view>
				<!-- 弹出层 end-->
				
			</div>


			<div class="top5">
				<view class="top5l">
					<a href="赋值B111" class="active"></a>
					<a href="赋值B112"></a>
					<a href="赋值B113"></a>
					<a href="赋值B113"></a>
					<a href="赋值B113"></a>
					<a href="赋值B113"></a>
					<a href="赋值B113"></a>
					<a href="赋值B113"></a>
					<a href="赋值B113"></a>
					<a href="赋值B113"></a>
					<a href="赋值B113"></a>
					<a href="赋值B113"></a>
					<a href="赋值B113"></a>
					<a href="赋值B113"></a>
					<a href="赋值B113"></a>
					<a href="赋值B113"></a>
					<a href="赋值B113"></a>
					<a href="赋值B113"></a>
					<a href="赋值B113"></a>
					<a href="赋值B113"></a>
				</view>
				
				<view class="top5r">

					<a href="" class="" :style="{ 'background-image': 'url(' + top5r_x1_img + ')' }">
						<view class="top5r_x1">
							<p class="top5r_x1_l">
								<!-- 2个下拉 -->
								<a :href="item_l.href" class="" v-for="(item_l,index_l) in base_xiala_l" :key="index_l"  >
									<span class="top5r_x1_r">
										<a :href="item.href" :style="{ 'background-image': 'url(' + base_xiala_r[index_l].img + ')' }" v-for="(item,index) in base_xiala_r[index_l].item" :key="index" ></a>
									</span>
								</a>

							</p>
							
						</view>
					</a>

					
					<a href="" :style="{ 'background-image': 'url(' + top5r_x2_img + ')' }"  >
						<view class="top5r_x2">
							<a href="javascript:;" :style="{ 'background-image': 'url(' + item.src + ')' }"  @click="_top5r_x2_ximg(index,item.id,item.value)" v-for="(item,index) in top5r_x2_ximg" :key="index" :class="index===top5r_x2_ximg_active?'active':''" ></a>
							
						</view>
					</a>
					
				</view>
			</div>

			


		</view>



		<view class="title">
			<p>简约型半开放式带抽五系酒柜</p>
			<p>JG-{{A}}{{B}}{{C}}-{{D1}}-{{D2}}{{D3}}-{{D4}}</p>
			<p>效果图</p>
			<p>智库</p>
		</view>



		<view class="tu">
			<view class="tu1">

				<!-- 贴图22 -->
				<block v-for="(item,index) in tietu" :key="index">
				<p :style="'width:'+item.width+'px;height:'+item.height+'px;x:'+item.x+'px;y:'+item.y+'px;background-image:url('+item.src+');z-index:'+index" class="tietu"></p>
				</block>

			</view>
			<image class="tu2" :src="tu2" model="scaleToFill"/>
			<image class="tu3" :src="tu3" model="scaleToFill"/>
		</view>


		<view class="tao">
			<view class="taol">
				<view class="tao_t">标准选配套件 Standard optional kit</view>

				<view class="taol_p">
					<p>名称</p>
					<p>名称<i class="xuanzhe" :class="taol_x1?'':'no'" @click="_taol_x1"></i></p>
					<p>名称<i class="xuanzhe" :class="taol_x2?'':'no'" @click="_taol_x2"></i></p>
					<p>名称<i class="xuanzhe" :class="taol_x3?'':'no'" @click="_taol_x3"></i></p>
					<p>名称</p>
				</view>

				<view class="taol_l">
					<p><span>名称</span><span>1</span><span></span><span></span></p>
					<p><span>名称</span><span>1</span><span></span><span></span></p>
					<p><span>名称</span><span>1</span><span></span><span></span></p>
				</view>
				<view class="taol_r">
					11.1
				</view>
				
			</view>


			<view class="taor">

				<!-- 弹出层B -->
				<view class="tanb" v-if="tanb">
					<view class="tanb_t">
						<a href="javascript:;" :class="index===tanb_active?'active':''" :style="{ 'background-image': 'url(' + tanb_img + ')'}"  @click="_tanb_t(item)" v-for="(item,index) in tanb_box" :key="index"> </a>
					</view>
				</view>
				<!-- 弹出层B end-->


				<view class="tao_t">购买或下定 Buy or make a decision</view>
				<view class="taor_l">
					<p><span>深</span><span>高</span><span>宽</span><span>投影面积</span></p>
					<p><span @click="_tanb(1)">{{A}}</span><span @click="_tanb(2)">{{B}}</span><span @click="_tanb(3)">{{C}}</span><span>{{tanb_mianji}}</span></p>
				</view>
				<view class="taor_r">
					<span>零售价:39200.87元</span>
					<span>此报价包含选配部分*将在3个工作日上门复测</span>
				</view>
				<view class="taor_f" title="点击复制" @click="copyText('JG-'+A+B+C+'-'+D1+'-'+D2+D3+'-'+B1)">
					<p>JG-{{A}}{{B}}{{C}}-{{D1}}-{{D2}}{{D3}}-{{B1}}</p>
					<p>生产图纸</p>
				</view>
				
			</view>


		</view>



		<view class="biao">
			<view class="tao_t">自动报价 Automated Quotation</view>
			<view class="biaot"><p></p><p>部件</p><p>品牌</p><p>材料</p><p>颜色</p><p>工艺</p><p>尺寸</p><p>单位</p><p>数量</p><p>单价</p><p>单项总价</p><p>总价</p><p>备注</p></view>

			<view class="biaotb">
<view class="biaoc_zongjia">123432.34</view>
			
			<view class="biaoc"><p>1</p><p>实心柜门</p><p>拼框</p><p>MAYRTI</p><p>胡桃木</p><p>胡桃咖里</p><p>3底2面水漆喷涂</p><p>22</p><p>平方</p><p>1.06</p><p>2850</p><p>3020.89</p><p></p><p>部件</p></view>

			<view class="biaoc"><p>2</p><p>玻璃柜门</p><p>拼框</p><p>MAYRTI</p><p>胡桃木</p><p>胡桃咖里</p><p>3底2面水漆喷涂</p><p>22</p><p>平方</p><p>1.06</p><p>2850</p><p>3020.89</p><p></p><p>部件</p></view>

			<view class="biaoc"><p>2</p><p>玻璃柜门</p><p>拼框</p><p>MAYRTI</p><p>胡桃木</p><p>胡桃咖里</p><p>3底2面水漆喷涂</p><p>22</p><p>平方</p><p>1.06</p><p>2850</p><p>3020.89</p><p></p><p>部件</p></view>

			<view class="biaoc"><p>2</p><p>玻璃柜门</p><p>拼框</p><p>MAYRTI</p><p>胡桃木</p><p>胡桃咖里</p><p>3底2面水漆喷涂</p><p>22</p><p>平方</p><p>1.06</p><p>2850</p><p>3020.89</p><p></p><p>部件</p></view>

			<view class="biaoc"><p>2</p><p>玻璃柜门</p><p>拼框</p><p>MAYRTI</p><p>胡桃木</p><p>胡桃咖里</p><p>3底2面水漆喷涂</p><p>22</p><p>平方</p><p>1.06</p><p>2850</p><p>3020.89</p><p></p><p>部件</p></view>




			<view class="biaoc"><p>3</p><p>柜体</p><p>拼框</p><p>MAYRTI</p><p>胡桃木</p><p>胡桃咖里</p><p>3底2面水漆喷涂</p><p>22</p><p>平方</p><p>1.06</p><p>2850</p><p></p><p></p><p>部件</p></view>


			
			</view>
			
		</view>


		<view class="footer_f" style="width: 100%; float: left; padding-bottom:10px;">
			<i class="xuanzhe" :class="footer_x1?'':'no'" @click="_footer_x1"></i>
			<p><span>柔性尺寸</span><input type="text" v-model="FT1"></p>
			<p><span>门店信息</span><input type="text" v-model="FT2"></p>
			<p><span>客户信息</span><input type="text" v-model="FT3"></p>
			<p><span>生成时间</span><input type="text" v-model="FT4"></p>
			<p><span>特别备注</span><input type="text" v-model="FT5"></p>
		</view>


		





	</view>
</template>


<script>
import base_nav from '../../static/base_nav.json'
import base_xiala from '../../static/base_xiala.json'
import tanAJson from '../../static/tanB.json'

	export default {
		// 赋默认值
		data() {
			return {
				base_xiala_l:base_xiala.xiala_l,
				base_xiala_r:base_xiala.xiala_r,
				tu2:'http://dna.mayrti.com/uploads/CCR-JG-560-350.svg',
				tu3:'http://dna.mayrti.com/uploads/CCR-JG-160-350.svg',
				taol_x1:false,
				taol_x2:false,
				taol_x3:false,
				footer_x1:false,
				top3f:[0,0,0,0,0,0,0,0,0,0],
				//导航一级图片
				top3f_img:"http://dna.mayrti.com/uploads/CCR-119-119-10nav.svg",
				top3f_active:"",
				tan:false,
				//弹出层二级图片
				tan_t:[
					"http://dna.mayrti.com/uploads/CCR-nav-20-117-1-mr.svg",
					"http://dna.mayrti.com/uploads/CCR-nav-20-117-1-mr.svg",
					"http://dna.mayrti.com/uploads/CCR-nav-20-117-1-mr.svg",
					"http://dna.mayrti.com/uploads/CCR-nav-20-117-1-mr.svg",
					"http://dna.mayrti.com/uploads/CCR-nav-20-117-1-mr.svg",
					"http://dna.mayrti.com/uploads/CCR-nav-20-117-1-mr.svg",
					"http://dna.mayrti.com/uploads/CCR-nav-20-117-1-mr.svg",
					"http://dna.mayrti.com/uploads/CCR-nav-20-117-1-mr.svg",
					"http://dna.mayrti.com/uploads/CCR-nav-20-117-1-mr.svg",
					"http://dna.mayrti.com/uploads/CCR-nav-20-117-1-mr.svg"
				],
				tan_t_active:"",
				tan_t_img:"",
				tan_f:base_nav.tan_f,
				tan_f_img:[],

				tanb:false,
				tanb_img:"",
				tanb_box:"",
				// 弹出层A图片
				tanb_imgA:"http://dna.mayrti.com/uploads/CCR-fc-128-70-50-mr-sd.svg",
				// 弹出层A数值
				tanb_boxA:[
					350,400,450,0,0,0,0,0,0,0,
					0,0,0,0,0,0,0,0,0,0,
					0,0,0,0,0,0,0,0,0,0,
					0,0,0,0,0,0,0,0,0,0,
					0,0,0,0,0,0,0,0,0,0,
				],
				// 弹出层B图片
				tanb_imgB:"http://dna.mayrti.com/uploads/CCR-fc-128-70-50-mr-gd.svg",
				// 弹出层B数值
				tanb_boxB:[
					350,400,450,0,0,0,0,0,0,0,
					0,0,0,0,0,0,0,0,0,0,
					0,0,0,0,0,0,0,0,0,0,
					0,0,0,0,0,0,0,0,0,0,
					0,0,0,0,0,0,0,0,0,0,
				],
				// 弹出层B图片
				tanb_imgC:"http://dna.mayrti.com/uploads/CCR-fc-128-70-50-mr-kd.svg",
				// 弹出层B数值
				tanb_boxC:[
					350,400,450,0,0,0,0,0,0,0,
					0,0,0,0,0,0,0,0,0,0,
					0,0,0,0,0,0,0,0,0,0,
					0,0,0,0,0,0,0,0,0,0,
					0,0,0,0,0,0,0,0,0,0,
				],
				tanb_di:"",
				A:0,
				B:0,
				C:0,

				tana:false,
				//系列弹出层
				tana_t_img:"http://dna.mayrti.com/uploads/CCR-nav-20-117-xl.svg",
				tana_box:[0,0,0,0,0,0,0,0,0,0],
				tana_t_active:"",

				tana_f:tanAJson.box,
				tana_f_img:tanAJson.box[0].item,
				
				//下拉
				top5r_x1_img:"http://dna.mayrti.com/uploads/CCR-nav-150-30-2-ccqj.svg",
				top5r_x2_img:"http://dna.mayrti.com/uploads/CCR-nav-150-30-hj.svg",
				top5r_x2_ximg:[
					{id:23,src:"http://dna.mayrti.com/uploads/CCR-nav-150-30-hj-R.svg",value:"R"},
					{id:58,src:"http://dna.mayrti.com/uploads/CCR-nav-150-30-hj-L.svg",value:"L"}
				],
				top5r_x2_ximg_active:"",

				//底部
				FT1:"",
				FT2:"",
				FT3:"",
				FT4:"",
				FT5:"",


				//顶部
				B1:0,

				D1:0,
				D2:0,
				D3:0,
				D3_id:0,
				D4:0,

				//贴图
				tietu:[
					{width:0,height:0,x:0,y:0,src:"none"},
					{width:0,height:0,x:0,y:0,src:"none"},
					{width:0,height:0,x:0,y:0,src:"none"},
					{width:0,height:0,x:0,y:0,src:"none"},
					{width:0,height:0,x:0,y:0,src:"none"},
					{width:0,height:0,x:0,y:0,src:"none"},
					{width:0,height:0,x:0,y:0,src:"none"},
					{width:0,height:0,x:0,y:0,src:"none"},
					{width:0,height:0,x:0,y:0,src:"none"},
					{width:0,height:0,x:0,y:0,src:"none"}
				]
				
			}
		},

		// 计算赋值
		computed:{
			//投影面积计算
			 tanb_mianji(){
				return parseFloat(this.B) * parseFloat(this.C) || 0
		     },

		},



		//点击等方法
		methods: {
			//复制
			copyText(e){
				uni.setClipboardData({
					data: e ,
					success: function (res) {
					console.log('复制的信息：',e );
					uni.showToast({
						title: '复制成功',
					});
					}
				});        
			},


			//下拉
			_top5r_x2_ximg(e,i,value){

				this.top5r_x2_ximgactive = e
				this.D3_id =i
				this.top5r_x2_img = this.top5r_x2_ximg[e].src
				this.D3 = value

			},

			//弹出层A
			_tana(e){
				this.tana = !this.tana
			},
			_tana_f(e){
				this.tana = !this.tana
			},
			_tana_t(e){
				this.tana_t_active = e
				this.tana_f_img = this.tana_f[e].item
				this.tana = true
			},



			// 弹出层B
			_tanb(e){

				if(e === this.tanb_di){
					this.tanb = false
					this.tanb_di=""
					return
				}


				this.tanb_di=e
					console.log("DDD",this.tanb_di);

					if(this.tanb_di==1){
						this.tanb_img=this.tanb_imgA
						this.tanb_box=this.tanb_boxA
					}if(this.tanb_di==2){
						this.tanb_img=this.tanb_imgB
						this.tanb_box=this.tanb_boxB
					}if(this.tanb_di==3){
						this.tanb_img=this.tanb_imgC
						this.tanb_box=this.tanb_boxC
					}

				this.tanb = true
			},
			_tanb_t(e){
				
				if(this.tanb_di==1){
					this.A=e
				}if(this.tanb_di==2){
					this.B=e
				}if(this.tanb_di==3){
					this.C=e
				}
				this.tanb = !this.tanb
			},

			// 弹出层
			_top3f(e,width,height,x,y){
				if(e === this.top3f_active){
					this.tan = false
					this.top3f_active=""
					return
				}
				this.top3f_active=e
				this.tan_t_img = this.tan_t[e]
				this.tan_t_active=0
				
				let tietu = this.tietu
				tietu[e].width=width
				tietu[e].height=height
				tietu[e].x=x
				tietu[e].y=y
				this.tietu = tietu
				console.log("tietu11",this.tietu);

				this.tan_f_img = this.tan_f[e].box[0].item
				console.log("Ddd", this.tan_f_img);
				this.tan = true
				
			},
			_tan_t(e){

				this.tan_t_active = e
				this.tan_f_img = this.tan_f[this.top3f_active].box[e].item
				this.tan = true

			},
			_tan_f(e){
				let shuju = this.tan_f[this.top3f_active].box[this.tan_t_active].item[e]

				
				let tietu = this.tietu


				if(shuju.width){
					tietu[this.top3f_active].width=shuju.width
				}
				if(shuju.height){
					tietu[this.top3f_active].height=shuju.height
				}
				if(shuju.x){
					tietu[this.top3f_active].x=shuju.x
				}
				if(shuju.width){
					tietu[this.top3f_active].y=shuju.y
				}

				tietu[this.top3f_active].src= shuju.tietu

				this.tietu = tietu;

				console.log("tietu22",this.tietu);

				this.tan = false
			},

			// 下拉
			_taol_x1(){
				this.taol_x1 = !this.taol_x1
			},
			_taol_x2(){
				this.taol_x2 = !this.taol_x2
			},
			_taol_x3(){
				this.taol_x3 = !this.taol_x3
			},

			// 底部
			_footer_x1(){
				this.footer_x1 = !this.footer_x1
			}
			
		}
	}
</script>

<style scoped lang="scss">
@import '../../static/index.scss';
@import '../../static/base_img.scss';
</style>